<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        li {
            list-style-type: none;
        }
    
        .l {
            float: left;
        }
    
        .r {
            float: right;
            margin-right: 24px;
            font-size: 1.1rem;
            color: rgb(243,134,126);
        }
    
        .c:after {
            clear: both;
            width: 0;
            height: 0;
            content: "";
            display: block;
            visibility: hidden;
        }
    
        .active {
            display: block!important;
        }
    
        .head {
            width:100%;
            margin: 0 auto;
        }
    
        .top {
            padding: 10px 0px;
            text-align: center;
            margin:12px 0;
            color: rgb(243,134,126);
            font-weight: 600;
            margin-bottom: 50px;
        }
        .top span{
            font-size: 1.5rem;
        }
        .bottom {
           width: 100%;
           margin: 0 auto;
        }
    
        .bottom div {
            display: none;
        }
    
        .bottom div ul {
          width: 100%;
        }
    
        .bottom div ul li {
            text-align: center;
            float: left;
            width: 29%;
            height: 40px;
            line-height: 40px;
            border: 1px solid rgb(243,134,126);
            margin-top: -1px;
            margin-left: -1px;
            border-radius: 18px;
            margin-left: 8px;   
            margin-bottom: 10px;
            text-align: center;
            vertical-align: center;
            color: rgb(243,134,126);
            background: #fff;
            cursor: pointer;
        }
    
        .bottom div ul li img {
            width: 200px;
        }
        .liActive {
            color: #fff!important;
            background-color: rgb(243,134,126)!important;
        }
        .newBtnBox{
            width: 100%;
            margin: 0 auto;
        }
        .newBtnBox{
            width: 100%;
            margin: 0 auto;
            position: relative;
            height: 50vh;
            clear: both;
        }
        .newBtn{
            width: 100px;
            height: 40px;
            background: rgb(243,134,126);
            border-radius: 4px;
            border: none;
            line-height: 40px;
            font-size: 1.2rem;
            color: #fff;
            display:block;
            margin: 0 auto;
            position: absolute;
            bottom: 80px;
            left: 0;
        }
        .newBtn1{
            left: 10%;
            background: rgb(124, 216, 252);
        }
        .newBtn2{
            right: -190px;
        }
        .theWish p{
            text-align: center;
            /* color: rgb(243,134,126); */
            color: #fff;
            font-size: 1.3rem;
            margin-bottom: 10px;
        }
        .theWish p:last-child{
            padding-top: 10px;
            /* border-top: 1px dashed #ccc; */
        }
        .theWish{
            margin: 20px 0;
        }
        .wishBox{
            height: 400px;
        }
        .theWish img{
            display:block;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0 auto;
            margin-bottom: 10px;
        }
        @media (max-width: 768px) {
            .bottom div ul li {
                width: 46%;
            }
        }
        .getText p{
            text-align: center;
            width: 80%;
            margin: 0 auto;
            height: 40px;
            line-height: 40px;
            text-align: center;
            vertical-align: center;
            color: rgb(243,134,126);
            background: #fff;
            margin-bottom: 10px;
        }
        .otherPage{
            display: none;
            background: rgb(243,134,126);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        @media (min-width: 768px) {
            .head,.newBtnBox{
                width: 80%;
            }
            .r {
                margin-right: 8%;
            }
        }
        @media (min-width: 1200px) {
            .head,.newBtnBox{
                width: 60%;
            }
            .r {
                margin-right: 8%;
            }
        }
    </style>
</head>
<body>
    <div class="otherPage">
        <div class="wishBox">
            <div class="theWish">
                <img src="./src/images/avatar.jpg" alt="">
                <p class="user">130612</p>
                <p>立下的新年FLAG</p>
            </div>
            <div class="getText"></div>
        </div>
    </div>
    <div class="head">
        <div class="top">
            <span>新年FLAG</span>
        </div>
    
        <div class="bottom c">
            <div class="active wishClass">
                <ul>
                    <!-- <li>身体健康</li>
                    <li>涨工资</li>
                    <li>不再失眠</li>
                    <li>发际线不再上移</li>
                    <li>冬暖夏凉，生活如意</li>
                    <li>平安顺遂</li> -->
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>
            <div>
                <ul>
                    <!-- <li>身体健康</li>
                    <li>涨工资</li>
                    <li>不再失眠</li>
                    <li>发际线不再上移</li>
                    <li>冬暖夏凉，生活如意</li>
                    <li>平安顺遂</li> -->
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>33</li>
                    <li>333</li>
                    <li>33333</li>
                    <li>333333</li>
                    <li>3333333</li>
                    <li>3333333333</li>
                </ul>
            </div>
        </div>
        <!-- <div class="getText"></div> -->
        <div class="changeText">
            <a href="javascript:;" class="r">换一批</a>
        </div>
        <div class="newBtnBox">
            <button class="newBtn newBtn1 newSbmit">提交</button>
            <button class="newBtn newBtn2">返回报告</button>
        </div>
    </div>
</body>
<script src="./src/js/jquery.min.js"></script>
<script>
    window.onload = function () {
         $('.otherPage').css('display','none');
        var change = document.querySelector(".changeText a"),
            bottom = document.querySelector(".bottom"),
            div = document.querySelectorAll(".bottom div"),
            li = document.querySelectorAll(".bottom ul li"),
            newSbmit = document.querySelector(".newSbmit")
            index = 0;
        change.onclick = function () {
             for(var i=0,len=div.length;i<len;i++){
                 div[i].className="";
             }
              index++;
              //index等于div数组的长度
              if(index==len) index=0;
              div[index].className="active";
        }
        $('.bottom li').click(function() {
            // 获取.bottom li 的索引值
            $(this).toggleClass("liActive");
            // if($('.liActive').length<3) {
            //     $(this).toggleClass("liActive");
            // }else{
            //     alert('不能超过3个FLAG哦！');
            //     if($('.liActive').length==3){
            //         $(this).removeClass("liActive");
            //     }
            // }
        })
        var content = [];
        var getContent = '';
        newSbmit.onclick = function () {
            for(var j=0;j<li.length; j++) {
                if(li[j].classList.contains('liActive')==true) {
                    var licontent=li[j].innerText;
                    content.push(licontent);
                    // content.push(licontent);
                }
                $('.head').css('display','none');
                $('.otherPage').css('display','block');
            }
           window.localStorage.setItem('workInfoList', JSON.stringify(content));// 插入 对象转字符串
           getContent = JSON.parse(localStorage.getItem('workInfoList'));
           $('.getText').append('<p>'+getContent+'</p>');
            // console.log('content'+content.toString());
            console.log('getContent',getContent)
        }
    }
</script>
</html>
